<template>
  <div class="about">
    <h2>{{data.title}}</h2>
    <el-row class="content">
      <div class="markdown-body" v-html="data.content" v-highlight></div>
    <div class="c1">
      <h1 style="text-align:center;">关于我</h1>
<h3>关  于  我</h3>
<span><i>网       名：</i>Mr.Liang</span>

<p><i>职       业：</i>前端开发工程师</p>

<p><i>就读大学：电子科技大学中山学院，计算机学院，软件开发</i></p>

<p><i>工作单位：</i>无</p>

<p><i>擅长技术：</i>


熟练jQuery、Bootstrap、Axios、LayUI、ElementUI、Vue、 Javascript、 Html5、CSS3等前端页面技术，

熟练使用VUE开发系统，

掌握Lunix等系统基本命令操作，

使用Python爬取有效的数据进行数据分析。</p>

<p><i>个人简介：</i>

      一个90后草根站长！17年入行。一直潜心研究web前端技术，一边工作一边积累经验，分享一些个人工作经历，以及技术文章等。 哈哈

</p><p>简历网站   >>>  进入查看</p>

 

<h3>关于博客</h3>
<p><i>博客网址：</i>www.myong.top</p>

<p><i>上线时间：</i>2017年12月01日</p>

<p><i>静态页面：</i>使用《今夕何夕》为基础模板，改版成VUE版本，部分样式使用LayUI实现</p>

<p><i>后台系统：</i>springboot</p>

<p><i>网站简介：</i>本站主要的栏目有，学无止境，个人日记，常用工具，在线留言，友情链接以及关于博客。PC端和移动端都可正常浏览
</p>
 

<h3>更新日志</h3>
<p>2018年8月-2019年1月</p>

<p>1、更新博客静态页面布局</p>

<p>2、重构后台系统，使用ThinkPHP5.1开发，前端所有的数据以接口的形式传递</p>

<p>3、优化博客性能。</p>

<p>2019年3月-2019年5月</p>

<p>1、站点管理系统新增，微信公众号管理模块，主要包含关键词自动回复，自定义菜单。</p>

<p>2、博客开启CDN，优化服务器性能</p>

<p>2019年5月-2018年6月</p>

<p>1、更换站点备案信息，</p>

<p>2、更换web服务为LNMP</p>

<p>3、微信公众号模块新增，素材管理功能，实现素材新增，上传，群发，预览，与微信服务器素材同步等功能。</p>
    </div>
    </el-row>
    
  </div>
</template>

<script>
import {getAbout} from '@/api/api'
import '../assets/plugins/hljs'
import marked from 'marked'
import 'highlight.js/styles/monokai.css'
import hljs from 'highlight.js'
import {addCodeBtn} from '../assets/plugins/mavon'
import '../assets/style/code.styl'
hljs.highlightCode = function () { 
	//自定义highlightCode方法，将只执行一次的逻辑去掉
	let blocks = document.querySelectorAll('pre code');
  [].forEach.call(blocks, hljs.highlightBlock);
};


let _this
export default {
  name: 'About',
  data () {
    return {
      data:[]
    }
  },
  watch: {
    data: function() {
        this.$nextTick(() => { 
            addCodeBtn()
        });
    }
  },
  created(){
    _this = this;
    _this.getAbout();
    hljs.highlightCode()
  },
  methods:{
    getAbout() {
      getAbout().then((res => {
        _this.data = res.data
        _this.data.content = marked(_this.data.content)
      })).catch(error => {
        _this.$message({type: 'error', message: '加载失败!', showClose: true})
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.about
  width 65%
  padding 0 20px
  box-sizing border-box
  h2
    line-height 100px
    color #555
    font-weight 500
    text-align center
  .content
    color #555
    line-height 2.5
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
    .c1 
      width 100%
      border 3px solid whitesmoke
      
      i 
        font-weight bolder
</style>
